<section class="breadcrumb-blog-version-one">
    <div class="single-bredcurms" style="background-image:url('/images/tourism_background.jpg');">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="bredcrums-content">
                        <h2>旅游路线</h2>
                        <ul>
                            <li><a href="index.html">旅游</a></li>
                            <li class="active"><a href="package-version-one.html">旅游路线</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><!-- blog breadcrumb version one end here -->

<div id="vue_container">
    <section class="search_area search_area_4" id="search_area_2">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="search_form">
                        <div class="input-group mb-3" style="width: 250px;float: left">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
                                        <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
                                        <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
                                    </svg>
                                </span>
                            </div>
                            <input v-model:value="routeSearchBean.keyword" type="text" class="form-control" placeholder="关键字查询">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 220px;float: left">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-week" viewBox="0 0 16 16">
                                      <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                                      <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                                    </svg>
                                </span>
                            </div>
                            <input v-model:value="routeSearchBean.startDate" type="date" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 220px;float: left">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-x" viewBox="0 0 16 16">
                                      <path d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708z"/>
                                      <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                                    </svg>
                                </span>
                            </div>
                            <input type="date" v-model:value="routeSearchBean.terminalDate" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 200px;float: left">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door" viewBox="0 0 16 16">
                                      <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
                                    </svg>
                                </span>
                            </div>
                            <input type="text" v-model:value="routeSearchBean.startPoint" class="form-control" placeholder="起点" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 200px;float: left">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor" viewBox="0 0 16 16">
                                      <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
                                    </svg>
                                </span>
                            </div>
                            <input type="text" v-model:value="routeSearchBean.terminalPoint" class="form-control" placeholder="终点" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="height: 36px;width: 250px;float: left">
                            &nbsp;
                            <label class="input-group-text" for="inputGroupSelect01">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-window-dock" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M15 5H1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5zm0-1H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1zm1-1a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3z"/>
                                    <path d="M3 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm4 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm4 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
                                </svg>
                            </label>
                            <select v-model:value="routeSearchBean.type" class="form-select" id="inputGroupSelect01" style="width: 150px">
                                <option selected></option>
                                <option value="跟团游">跟团游</option>
                                <option value="私家团">私家团</option>
                                <option value="自由行">自由行</option>
                                <option value="半自助游">半自助游</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" style="width: 400px;float: left">
                            <input type="text" v-model:value="routeSearchBean.minPrice" class="form-control" placeholder="最低价格" aria-label="Username">
                            <span class="input-group-text">-</span>
                            <input type="text" v-model:value="routeSearchBean.maxPrice" class="form-control" placeholder="最高价格" aria-label="Server">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 200px;float: left">
                            <span class="input-group-text">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
                              <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                              <path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                            </svg>
                            </span>
                            <input type="number" min="1" v-model:value="routeSearchBean.maxPeople" class="form-control" placeholder="人数" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="input-group mb-3" style="width: 200px;float: left">
                            <span class="input-group-text" id="basic-addon1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shop" viewBox="0 0 16 16">
                                  <path d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zM4 15h3v-5H4v5zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3zm3 0h-2v3h2v-3z"/>
                                </svg>
                            </span>
                            <input type="number" max="5" min="1" v-model:value="routeSearchBean.level" class="form-control" placeholder="星级" aria-label="Username" aria-describedby="basic-addon1">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                            <button type="button" onclick="initRoutes()" class="btn btn-outline-secondary">搜索</button>
                    </div>
                </div>
        </div>
</div>
</section>

<section class="popular-packages">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-6 col-lg-4" v-for="route in routes">
                <div class="single-package">
                    <div class="package-image">
                        <a href="/tourism/routeDetail" @click="routeDetail(route.id)"><img style="width: 385px;height: 331px" v-bind:src="route.tourismImage[0].url" alt=""></a>
                    </div>
                    <div class="package-content">
                        <h3><a href="" title="">{{route.title}}</a></h3>
                        <p>{{route.startPoint}}出发 ，{{route.days}} 天, {{route.days - 1}} 夜
                            畅玩 {{route.terminalPoint}} <span style="float: right">￥{{route.price}}</span>
                        </p>
                    </div>
                    <div class="package-calto-action">
                        <ul class="ct-action">
                            <li><a href="/tourism/routeDetail" @click="routeDetail(route.id)" class="travel-booking-btn hvr-shutter-out-horizontal">点击查看详情</a>
                            </li>
                            <li>
                                <i class="fa fa-star" v-for="j in route.level"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div> <!-- single package end -->
        </div>
        <div class="row pagination_wrapper">
            <div class="col-sm-12 text-center">
                <ul class="pagination" id="pagination">
                </ul>
            </div><!-- pagination end here -->
        </div>
    </div>
</section> <!--end  popular packajge -->
</div>
<!-- ============================
        JavaScript Files
============================= -->

<!-- jquery latest version -->
<script src="/reception/js/vendor/jquery-3.2.0.min.js"></script>
<script src="/reception/js/vendor/modernizr-2.8.3.min.js"></script>
<!-- bootstrap js -->
<script src="/reception/js/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="/reception/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/reception/js/slick.min.js"></script>
<!-- meanmenu js -->
<script src="/reception/js/jquery.meanmenu.min.js"></script>
<!-- jquery-ui js -->
<script src="/reception/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="/reception/js/wow.min.js"></script>
<!-- counter js -->
<script src="/reception/js/jquery.counterup.min.js"></script>
<!-- Countdown js -->
<script src="/reception/js/jquery.countdown.min.js"></script>
<!-- waypoints js -->
<script src="/reception/js/jquery.waypoints.min.js"></script>
<!-- Isotope js -->
<script src="/reception/js/isotope.pkgd.min.js"></script>
<!-- magnific js -->
<script src="/reception/js/jquery.magnific-popup.min.js"></script>
<!-- Image loaded js -->
<script src="/reception/js/imagesloaded.pkgd.min.js"></script>
<!-- chossen js -->
<script src="/reception/js/chosen.jquery.min.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/plugins.js"></script>
<!-- select2 js plugin -->
<script src="/reception/js/select2.min.js"></script>
<script src="/reception/js/colors.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/jquery-customselect.js"></script>
<!-- main js -->
<script src="/reception/js/custom.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var routeVue = new Vue({
        el: "#vue_container",
        data: {
            routes: [],
            routeSearchBean: {
                currentPage: 1,
                pageSize: 6,
                orderBy: "",
                direction: "",
                keyword: "",
                startPoint: "",
                terminalPoint: "",
                startDate: "",
                terminalDate: "",
                type: "",
                maxPrice: "",
                minPrice: "",
                level: "",
                maxPeople: "",
            },
            pages: 0
        },
        methods: {
            initRoutes: function () {
                var self = this;
                var routeSearchBean = this.routeSearchBean;
                $.ajax({
                    type: "POST",
                    url: "/api/routes",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(routeSearchBean),
                    success: function (rs) {
                        var routes = rs.list;
                        $.each(routes, function (index, route) {
                            var startDate = new Date(route.startDate).getTime();
                            var terminalDate = new Date(route.terminalDate).getTime();
                            route.days = (terminalDate - startDate) / (1000 * 60 * 60 * 24);
                            route.level = parseInt(route.level);
                        })
                        self.routes = routes;
                        self.routeSearchBean.currentPage = rs.pageNum;
                        self.pages = rs.pages;
                        var pagination = $("#pagination")
                        pagination.html("");
                        for (var i = 1; i <= self.pages; i++) {
                            if (i === self.routeSearchBean.currentPage) {
                                pagination.append("<li class=\"active\"><a href=\"#\" >" + i + "<span class=\"sr-only\">(current)</span></a></li>")
                            } else {
                                pagination.append("<li><a href='#' onclick='pageUp(" + i + ")' >" + i + "</a></li>")
                            }
                        }
                        if (self.routeSearchBean.currentPage === self.pages) {
                            pagination.append("<li><a href ='javascript:return false;' style='opacity: 0.2' ><i class=\"fa fa-chevron-right\"></i></a></li>")
                        } else {
                            pagination.append("<li><a href='#' onclick='pageUp(" + (routeSearchBean.currentPage + 1) + ")' ><i class=\"fa fa-chevron-right\"></i></a></li>")
                        }
                    },
                    error: function (rs) {
                        alert(rs.message)
                    }
                })
            },
            pageUp: function (index) {
                routeVue.routeSearchBean.currentPage = index;
                // console.log(routeVue.searchBean.currentPage)
                routeVue.initRoutes();
            },
            routeDetail: function(id){
                sessionStorage.setItem("routeId", id);
            }
        },
        created: function () {
            window.initRoutes = this.initRoutes;
            window.pageUp = this.pageUp;
        },
        mounted: function () {
            this.initRoutes();
        }
    })
</script>
